<template>
    <div>
        <div class="header-search-box">
            <el-form ref="searchFormRef" :inline="true" :model="searchForm">
                <el-form-item label="SBU:" prop="sbu">
                    <el-select
                        v-model="searchForm.sbu"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <!-- <el-option label="sbu1" value="sbu1" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="客户:" prop="pinpai">
                    <el-select
                        v-model="searchForm.pinpai"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <!-- <el-option label="pinpai" value="pinpai" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="品牌:" prop="brand">
                    <el-select
                        v-model="searchForm.brand"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <!-- <el-option label="brand" value="brand" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="架类:" prop="jialei">
                    <el-select
                        v-model="searchForm.jialei"
                        placeholder="请选择"
                        style="width: 100%"
                    >
                        <!-- <el-option label="brand" value="brand" /> -->
                    </el-select>
                </el-form-item>
                <el-form-item label="周期:" prop="date">
                    <el-date-picker
                        v-model="searchForm.date"
                        type="daterange"
                        unlink-panels
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期"
                    />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="search">查询</el-button>
                    <el-button icon="refresh">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="content">
            <div>当期未完成情况统计</div>
            <div class="items">
                <div class="item">
                    <cardChartItem :title="'已延期SBU数量情况'">
                        <template #body>
                            <pieCharts :id="'echart1'" />
                        </template>
                    </cardChartItem>
                </div>
                <div class="item">
                    <cardChartItem :title="'各SBU延期时长情况'">
                        <template #body>
                            <barCharts :id="'echart3'" />
                        </template>
                    </cardChartItem>
                </div>
            </div>
            <div class="items">
                <div class="item">
                    <cardChartItem :title="'已延期节点数量统计'">
                        <template #body>
                            <pieChartsCircle :id="'echart4'" />
                        </template>
                    </cardChartItem>
                </div>
                <div class="item">
                    <cardChartItem :title="'各节点延期时长情况'">
                        <template #body>
                            <lineCharts1 :id="'echart5'" />
                        </template>
                    </cardChartItem>
                </div>
            </div>
            <div class="items">
                <div class="item">
                    <cardChartItem :title="'已延期原因数量统计'">
                        <template #body>
                            <pieCharts :id="'echart6'" />
                        </template>
                    </cardChartItem>
                </div>
                <div class="item">
                    <cardChartItem :title="'各原因延期时长情况'">
                        <template #body>
                            <barCharts :id="'echart7'" />
                        </template>
                    </cardChartItem>
                </div>
            </div>
            <div class="items">
                <div class="item">
                    <cardChartItem :title="'已延期架类数量情况'">
                        <template #body>
                            <pieCharts :id="'echart8'" />
                        </template>
                    </cardChartItem>
                </div>
                <div class="item">
                    <cardChartItem :title="'各架类延期时长情况'">
                        <template #body>
                            <barCharts :id="'echart9'" />
                        </template>
                    </cardChartItem>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from "vue";
import cardChartItem from "@/components/echarts/components/cardChartItem.vue";
import pieCharts from "@/components/echarts/pieCharts.vue";
import lineCharts1 from "@/components/echarts/lineCharts.vue";
import barCharts from "@/components/echarts/barCharts.vue";
import pieChartsCircle from "@/components/echarts/pieChartsCircle.vue";

const searchFormRef = ref();
const searchForm = ref({});
</script>

<style lang="scss" scoped>
.header-search-box {
    background: #fff;
    padding: 18px;
    padding-bottom: 0;
    margin-bottom: 12px;
    .el-form-item {
        width: calc(25% - 32px);
    }
}
.content {
    width: 100%;
    .items {
        display: flex;
        justify-content: space-between;
        .item {
            flex: 0 0 calc(50% - 6px);
        }
    }
}
</style>